<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      <style>
        .box{
          width: 300px;
          height: 300px;
          background: blue;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div class="box">
         <button  @click = 'flag = false'> 点击 </button>
         <input type="text"  v-if = "flag" v-focus.yyb v-model = "msg">
         <input type="text"  v-if = "flag" v-focus v-model = "msg">
        </div>
      </div> 
    </body>
    <script>
    Vue.directive( 'focus',{
        bind ( el,binding,vnode,oldVnode ) { //调用一次，指令一绑定在元素身上就会触发
          // console.log( 'bind focus' )
          // console.log( 'el',el  ) // el 指令绑定的元素
          // console.log( 'binding',binding ) // 指令的详细信息
          // console.log( 'vnode', vnode )  // 当前绑定元素的信息
          // console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
          // el.style.background = 'red'
        },
        inserted (  el,binding,vnode,oldVnode ) { // 当前绑定的元素插入父节点时调用
          el.focus()
          if( binding.modifiers.yyb ){
            el.style.color = 'green'
          }else{
            el.style.color = 'red'
          }
          console.log( binding )
          console.log( 'inserted ' )
        },
        update ( el, binding, vnode, oldVnode ) {  // 当前指令绑定的元素发生改变
          console.log( 'update' )
          console.log( 'el',el  ) // el 指令绑定的元素
          console.log( 'binding',binding ) // 指令的详细信息
          console.log( 'vnode', vnode )  // 当前绑定元素的信息
          console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
        },
        componentUpdated ( el,binding,vnode,oldVnode) { //当前绑定元素发生改变，或是子元素发生改变
          console.log( 'componentUpdated' )
        },
        unbind ( el,binding,vnode,oldVnode) { // 组件销毁时触发
          console.log( 'unbind' )
        }
      })
    
      new Vue({
        el: '#app',
        data: {
          msg: 1000,
          flag: true
        },
        directives: {
          'focus': {
            bind () {
    
            },
            inserted () {
    
            },
            update () {
    
            },
            componentUpdated () {
    
            },
            unbind () {
              
            }
          }
        }
      })
    </script>
</html>